<template>
  <div class="course-list">
    <el-card class="course-list-card">
      <template #header>
        <card-header>
          <template #title>课程列表</template>
          <template #actions>
            <el-button type="primary" icon="Plus">创建课程</el-button>
          </template>
        </card-header>
      </template>

      <statistics-display :loading="loading" :error="error">
        <div v-if="courses && courses.length > 0" class="courses">
          <el-table :data="courses" style="width: 100%" row-class-name="course-row">
            <el-table-column prop="title" label="课程名称">
              <template #default="_">
                <div class="course-title">
                  <h3>{{ _.row.title }}</h3>
                  <p>{{ _.row.description }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="progress" label="进度" width="200">
              <template #default="scope">
                <el-progress 
                  :percentage="scope.row.progress" 
                  :show-text="false" 
                  stroke-width="10" 
                />
                <div class="progress-text">{{ scope.row.progress }}%</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default>
                <el-button size="small" type="primary">继续学习</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <el-empty v-else description="暂无课程" />
      </statistics-display>
    </el-card>
  </div>
</template>

<script>
import CardHeader from './CardHeader.vue';
import StatisticsDisplay from './StatisticsDisplay.vue';

export default {
  name: 'CourseList',
  components: {
    CardHeader,
    StatisticsDisplay
  },
  data() {
    return {
      courses: null,
      loading: false,
      error: null,
    };
  },
  mounted() {
    this.loadCourses();
  },
  methods: {
    async loadCourses() {
      this.loading = true;
      this.error = null;

      try {
        const response = await window.electronAPI.getCourses();

        if (response.success) {
          this.courses = response.data;
        } else {
          throw new Error(response.error || 'Failed to load courses');
        }
      } catch (err) {
        console.error('Error loading courses:', err);
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },


    _handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loadCourses();
    },

    _handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.loadCourses();
    },
  },
};
</script>

<style scoped>
.course-list {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.course-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.course-card h3 {
  margin-top: 0;
  color: #333;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.published {
  background-color: #42b983;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
}

.draft {
  background-color: #ccc;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
}

.loading,
.error {
  padding: 20px;
  text-align: center;
}

.loading {
  color: #1890ff;
}

.error {
  color: #ff4d4f;
  background-color: #fff2f0;
  border-radius: 4px;
}

.no-courses {
  text-align: center;
  padding: 40px;
  color: #999;
}
</style>
